<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆形进度条</title>
</head>
<style>
    .svg-box {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .progress-bar {
        transition: stroke-dasharray 0.3s;
    }
</style>

<body>
    <svg class="svg-box" width="500" height="500">
        <g fill="none" stroke-width="20" stroke-linecap="round" transform="rotate(-90 250,250)">
            <circle cx="250" cy="250" r="200" stroke="grey"></circle>
            <circle class="progress-bar" cx="250" cy="250" r="200" stroke="#67a7df"></circle>
        </g>
        <text class="progress-text" x="250" y="280" font-size="100" text-anchor="middle">0%</text>
    </svg>
</body>
<script>
    /** 底层一个背景圆形。上面一个进度条圆形。
    用stroke-dasharray属性实现,一段实心，一段空心。空心长度不变，最少长为圆形周长。改变实心的长度
    然后变换是从右边那个点开始的，所以需要旋转90度
    */

    let progressBar = document.querySelector('.progress-bar')
    let progressText = document.querySelector('.progress-text')
    function run(percent) {
        let r = progressBar.getAttribute('r')
        let circleLength = Math.floor(2 * Math.PI * r)

        progressBar.setAttribute('stroke-dasharray', (circleLength * percent / 100) + ',' + circleLength)

        progressText.innerHTML = percent + '%'
    }

    let percent = 0
    setInterval(() => {
        percent = percent + 10
        if (percent > 100) {
            percent = 0
        }
        run(percent)
    }, 500);
</script>

</html>